feat: accept a className in `mountNode` in `Portal` #27008

layershifter · 2023-02-28T16:43:40Z

New Behavior

Implements RFC #27009.

Now mountNode prop can be an object and allows to configure applied classes.

function App() {
  return (
    <>
      {/* There usages are equal */}
      <Tooltip mountNode={mountNode} />
      <Tooltip mountNode={{ element: mountNode }} />

      {/* Now applied classes can be configured 🔥 */}
      <Tooltip mountNode={{ className }} />
    </>
  );
}

Example with `zIndex`

import * as React from "react";
import {
  makeStyles,
  Popover,
  PopoverSurface,
  PopoverTrigger,
  tokens
} from "@fluentui/react-components";

const useClasses = makeStyles({
  mountNode: {
    color: tokens.colorBrandBackground,
    zIndex: 100
  }
});

function App() {
  const classes = useClasses();

  return (
    <Popover mountNode={{ className: classes.mountNode }}>
      <PopoverSurface>
        <div />
      </PopoverSurface>
    </Popover>
  );
}

Related Issue(s)

Fixes #26758

size-auditor · 2023-02-28T16:56:30Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 533fcd3f705bc3161fb85f773fc396455f507d10 (build)

fabricteam · 2023-02-28T16:57:52Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1341	1347	5000
Button	mount	964	960	5000
Field	mount	2054	2063	5000
FluentProvider	mount	1697	1655	5000
FluentProviderWithTheme	mount	634	630	10
FluentProviderWithTheme	virtual-rerender	587	595	10
FluentProviderWithTheme	virtual-rerender-with-unmount	624	634	10
InfoButton	mount	592	567	5000
MakeStyles	mount	1953	1895	50000
Persona	mount	3073	3081	5000
SpinButton	mount	2530	2548	5000

codesandbox-ci · 2023-02-28T16:59:00Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 119e446:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2023-02-28T16:59:36Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-combobox` Combobox (including child components)	`88.622 kB` `28.082 kB`	`88.7 kB` `28.099 kB`	`78 B` `17 B`
`react-combobox` ComboboxField	`84.988 kB` `27.82 kB`	`85.066 kB` `27.838 kB`	`78 B` `18 B`
`react-combobox` Dropdown (including child components)	`87.309 kB` `27.827 kB`	`87.387 kB` `27.842 kB`	`78 B` `15 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`206.206 kB` `57.126 kB`	`206.273 kB` `57.145 kB`	`67 B` `19 B`
`react-infobutton` InfoButton	`130.366 kB` `39.382 kB`	`130.438 kB` `39.407 kB`	`72 B` `25 B`
`react-menu` Menu (including children components)	`130.26 kB` `39.493 kB`	`130.333 kB` `39.499 kB`	`73 B` `6 B`
`react-menu` Menu (including selectable components)	`133.436 kB` `40.038 kB`	`133.509 kB` `40.037 kB`	`73 B` `-1 B`
`react-popover` Popover	`117.438 kB` `35.784 kB`	`117.51 kB` `35.799 kB`	`72 B` `15 B`
`react-portal` Portal	`11.377 kB` `4.179 kB`	`11.715 kB` `4.265 kB`	`338 B` `86 B`
`react-tooltip` Tooltip	`49.273 kB` `16.775 kB`	`49.351 kB` `16.799 kB`	`78 B` `24 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-alert` Alert	`90.467 kB` `22.106 kB`
`react-avatar` Avatar	`54.149 kB` `14.571 kB`
`react-avatar` AvatarGroup	`18.064 kB` `6.664 kB`
`react-avatar` AvatarGroupItem	`70.425 kB` `19.075 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`67.03 kB` `18.099 kB`
`react-components` react-components: FluentProvider & webLightTheme	`37.861 kB` `12.034 kB`
`react-dialog` Dialog (including children components)	`92.72 kB` `27.216 kB`
`react-persona` Persona	`61.21 kB` `16.521 kB`
`react-portal-compat` PortalCompatProvider	`6.324 kB` `2.129 kB`
`react-table` DataGrid	`149.792 kB` `40.502 kB`
`react-table` Table (Primitives only)	`46.798 kB` `12.557 kB`
`react-table` Table as DataGrid	`137.684 kB` `35.154 kB`
`react-table` Table (Selection only)	`85.511 kB` `21.173 kB`
`react-table` Table (Sort only)	`84.832 kB` `20.982 kB`

_{🤖 This report was generated against 533fcd3f705bc3161fb85f773fc396455f507d10}

fabricteam · 2023-02-28T17:08:54Z

🕵 fluentuiv9 No visual regressions between this PR and main

packages/react-components/react-portal/src/components/Portal/usePortalMountNode.test.ts

* master: (141 commits) chore: prerequisite changes before migrating v9 packages to SWC based transpilation (microsoft#26965) feat: Add InfoLabel component (microsoft#27118) fix(tools): update migrate-converged generator to add node field to package.json exports map (microsoft#27152) applying package updates fix: Embed play/pause indicator should render correctly in high contrast mode (microsoft#27213) feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens (microsoft#27034) chore: Prepare release 0.66.4 (microsoft#27163) fix(react-datepicker-compat): Fix text entry issues with input (microsoft#27204) fix: Smooth out animation of indeterminate progress bar (microsoft#27201) Add cxe-red as a codeowner of react-file-type-icons (microsoft#27147) Added documentation about custom style hooks (microsoft#27087) Custom style react-text (microsoft#27078) Custom style react-image (microsoft#27066) Add JSDoc for tabster focus indicator selector (microsoft#27041) Theme designer: Move colors to local files (microsoft#27191) docs(react-card): move card out of preview (microsoft#27185) Include values in typography table (microsoft#27189) feat: accept a className in `mountNode` in `Portal` (microsoft#27008) RFC: Extend `mountNode` prop in `Portal` (microsoft#27009) applying package updates ...

msft-fluent-ui-bot assigned Hotell Feb 28, 2023

github-actions bot added this to the February Project Cycle Q1 2023 milestone Feb 28, 2023

layershifter unassigned Hotell Feb 28, 2023

layershifter force-pushed the feat/mount-node-options branch from ccf6d78 to f72d5fb Compare February 28, 2023 17:12

layershifter marked this pull request as ready for review March 3, 2023 09:09

layershifter requested a review from a team as a code owner March 3, 2023 09:09

ling1726 reviewed Mar 3, 2023

View reviewed changes

packages/react-components/react-portal/src/components/Portal/usePortalMountNode.test.ts Outdated Show resolved Hide resolved

ling1726 approved these changes Mar 3, 2023

View reviewed changes

github-actions bot modified the milestones: February Project Cycle Q1 2023, March Project Cycle Q1 2023 Mar 14, 2023

layershifter enabled auto-merge (squash) March 14, 2023 10:05

layershifter force-pushed the feat/mount-node-options branch from c223d2e to 93c8e18 Compare March 14, 2023 10:28

feat: accept a className in mountNode in Portal

119e446

layershifter force-pushed the feat/mount-node-options branch from 93c8e18 to 119e446 Compare March 14, 2023 10:34

layershifter merged commit 6d89241 into microsoft:master Mar 14, 2023

layershifter deleted the feat/mount-node-options branch March 14, 2023 15:09

GeoffCoxMSFT pushed a commit to GeoffCoxMSFT/fluentui that referenced this pull request Mar 14, 2023

feat: accept a className in mountNode in Portal (microsoft#27008)

d8ef15a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: accept a className in `mountNode` in `Portal` #27008

feat: accept a className in `mountNode` in `Portal` #27008

Uh oh!

layershifter commented Feb 28, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Feb 28, 2023 •

edited

Loading

Uh oh!

fabricteam commented Feb 28, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Feb 28, 2023 •

edited

Loading

Uh oh!

fabricteam commented Feb 28, 2023 •

edited

Loading

Uh oh!

fabricteam commented Feb 28, 2023 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat: accept a className in mountNode in Portal #27008

feat: accept a className in mountNode in Portal #27008

Uh oh!

Conversation

layershifter commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New Behavior

Example with zIndex

Related Issue(s)

Uh oh!

size-auditor bot commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

codesandbox-ci bot commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat: accept a className in `mountNode` in `Portal` #27008

feat: accept a className in `mountNode` in `Portal` #27008

layershifter commented Feb 28, 2023 •

edited

Loading

Example with `zIndex`

size-auditor bot commented Feb 28, 2023 •

edited

Loading

fabricteam commented Feb 28, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

codesandbox-ci bot commented Feb 28, 2023 •

edited

Loading

fabricteam commented Feb 28, 2023 •

edited

Loading

fabricteam commented Feb 28, 2023 •

edited

Loading